<template>
  <view class="container">
    <!-- <view class="wrapper">
      <view class="left-top-sign">LOGIN</view>
      <view class="welcome">欢迎回来！</view>
      <view class="input-content">
        <view class="input-item">
          <text class="tit">手机号码</text>
          <input type="text" placeholder="请输入手机号码" />
        </view>
        <view class="input-item">
          <text class="tit">密码</text>
          <input type="password" placeholder="请输入密码" />
        </view>
      </view>
      <button class="confirm-btn">登录</button>
      <view class="forget-section">忘记密码?</view>
    </view> -->

    <view class="wrapper">
      <view class="left-top-sign">LOGIN</view>
      <view class="welcome">欢迎回来！</view>
      <uni-forms :modelValue="formData" class="input-content" ref="form" :rules="formRules" validateTrigger="blur" label-align="right">
        <uni-forms-item label="手机号" name="phone" required class="input-item"><uni-easyinput type="text" v-model="formData.phone" placeholder="请输入手机" /></uni-forms-item>
        <uni-forms-item label="密码" name="password" required class="input-item"><uni-easyinput type="text" v-model="formData.password" placeholder="请输入密码" /></uni-forms-item>
      </uni-forms>
      <button class="confirm-btn" @click="login">登录</button>
    </view>
    <view class="register-section">
      还没有账号?
      <text>马上注册</text>
    </view>
  </view>
</template>

<script>
import request from '@/utils/request.js';
export default {
  data() {
    return {
      // 登录表单信息
      formData: {
        phone: '15711140593',
        password: '123456yzy'
      },
      // 表单校验规则
      formRules: {
        // 手机号码
        phone: {
          rules: [
            {
              required: true,
              errorMessage: '手机号是必填项'
            },
            {
              pattern: '^1[3-9]\\d{9}$',
              errorMessage: '手机号格式不正确'
            }
          ]
        },
        // 密码
        password: {
          rules: [
            {
              required: true,
              errorMessage: '密码是必填项'
            }
          ]
        }
      }
    };
  },
  methods: {
    // 登录事件
    async login() {
      const { phone, password } = this.formData;
      // 校验整体表单
      try {
        const mes = await this.$refs.form.validate();
        const res = await request('/login/cellphone', { phone, password });

        if (res.code !== 200) {
          return uni.showToast({
            icon: 'error',
            title: '账号密码错误',
            duration: 2000
          });
        }
        // 存储个人信息
        uni.setStorageSync('userInfo', JSON.stringify(res.profile));
        // 存cookies
        // uni.setStorageSync('cookies', res.cookie.spilt());
        uni.showToast({
          icon: 'success',
          title: '登录成功',
          duration: 2000
        });
        // 回跳个人中心界面
        uni.reLaunch({
          url: '/pages/personal/personal'
        });
        // 存token和个人信息
        // uni.setStorageSync(
        //   'userInfo',
        //   JSON.stringify({
        //     avatarUrl:
        //       'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.duoziwang.com%2F2019%2F02%2F03300852112808.jpg&refer=http%3A%2F%2Fimg.duoziwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671453851&t=548d674dce82cca6cc8d01bae7a92a29',
        //     nickname: 'kennel',
        //     uid: 2075939212
        //   })
        // );
      } catch (e) {
        //TODO handle the exception
        uni.showToast({
          icon: 'error',
          title: '登录信息有误，请检查',
          duration: 2000
        });
      }
    }
  }
};
</script>

<style lang="scss">
/* pages/login/login.wxss */
.wrapper {
  position: relative;
  z-index: 90;
  padding-bottom: 40rpx;
}

.left-top-sign {
  font-size: 120rpx;
  color: #f8f8f8;
  position: relative;
  left: -16rpx;
}

.welcome {
  position: relative;
  left: 50rpx;
  top: -90rpx;
  font-size: 46rpx;
  color: #555;
}

.input-content {
  padding: 0 60rpx;
}
.input-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 30rpx;
  background: #f8f6fc;
  height: 120rpx;
  border-radius: 4px;
  margin-bottom: 50rpx;
}

.input-item:last-child {
  margin-bottom: 0;
}
.input-item .tit {
  height: 50rpx;
  line-height: 56rpx;
  font-size: 30rpx;
  color: #606266;
}
.input-item input {
  height: 60rpx;
  font-size: 30rpx;
  color: #303133;
  width: 100%;
}
.confirm-btn {
  width: 630rpx !important;
  height: 76rpx;
  line-height: 76rpx;
  border-radius: 50rpx;
  margin-top: 70rpx;
  background: #d43c33;
  color: #fff;
  font-size: 32rpx;
  padding: 0;
}
.confirm-btn2:after {
  border-radius: 100px;
}

.forget-section {
  font-size: 28rpx;
  color: #4399fc;
  text-align: center;
  margin-top: 40rpx;
}

.register-section {
  position: absolute;
  left: 0;
  bottom: 50rpx;
  width: 100%;
  font-size: 28rpx;
  color: #606266;
  text-align: center;
}
.register-section text {
  color: #4399fc;
  margin-left: 10rpx;
}
</style>
